import { Col, List, Avatar } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom';
import Fromnow from '../compoment/fromnow'

function Listitem(props) {
    let { loading, data } = props;
    return <List
        className='list'
        loading={loading}
        dataSource={data}
        renderItem={(data) => {
            // console.log(data);
            let { author, last_reply_at, title, id } = data
            let { loginname, avatar_url } = author
            return <List.Item>
                <Col xs={24}
                    md={20} >
                    <Link to={`/user/${loginname}`}>
                        <Avatar icon={<UserOutlined />} src={avatar_url} title={loginname} />
                        <Link className='title' to={`/topic/${id}`}>{title}</Link>
                    </Link>
                </Col>
                <Col className='from_now' xs={0}
                    md={4}>
                    < Fromnow data={last_reply_at} />
                </Col>
            </List.Item>
        }}
    />
}

export default Listitem